<template>
    <div>
        <Row style="margin-top:20px">
            <Col span="15"
                 class="table-form-input-select-col">
            <span class="alltitle">
                <router-link to="项目列表"> 项目列表</router-link>>预备员工专区>预备员工
            </span>
            </Col>
            <Col span="3">
            <span class="inline-title"> <a href="../51admin/example4.xlsx">下载预备员工模板</a></span>
            </Col>
            <Col span="3">
            <span class="inline-title"
                  @click="handleFileChange">批量导入</span>
            <form id="activeForm"
                  enctype="multipart/form-data">
                <input type="file"
                       id="fileExport"
                       ref="inputer"
                       style="display:none"
                       @change="importExcel($event)"
                       name="execl">
            </form>
            </Col>
            <Col span="3">
            <Button type="primary"
                    @click="exportData">导出数据</Button>
            <Button class="add" type="primary"
                    @click="addOne">新增</Button>
            </Col>
        </Row>
        <Input class="searcher" search enter-button placeholder="姓名、昵称、手机号" @on-search="search"/>
        <div class="content-div"
             style="margin-top:30px">
            <Table border
                   stripe
                   :columns="columns2"
                   :data="data"
                   ref="table"></Table>
            <Page v-show="!showResult" class="paganation" :total="total" :page-size="20" show-elevator @on-change="changePage"/>
        </div>
        
        <Modal v-model="show"
               title="积分明细"
               @on-ok="ok">
            <Timeline>
                <TimelineItem v-for="item in data2">
                    <p class="time">{{item.integral>0?'+':''}}{{item.integral}}</p>
                    <p class="content">{{item.title}}</p>
                    <p>{{item.create_at}}</p>
                </TimelineItem>
            </Timeline>
        </Modal>

        <Modal v-model="date_show"
               title="设置报道时间"
               @on-ok="oktime">
            <date-picker v-model="value2"
                         align="right"
                         type="date"
                         placement:right
                         placeholder="选择日期"
                         format="yyyy/MM/dd"
                         :picker-options="pickerOptions"
                         class="timepick">
            </date-picker>
        </Modal>
        
        <Adder ref="editor" :type="'new'" @success="refresh"></Adder>
    </div>
</template>
<script>
import { formatDate } from "@/js/date.js";
import Adder from '../../components/employeeAdd'
export default {
    data() {
        return {
            pickerOptions: {},
            value2: null,
            data: [],
            data2: [],
            data3: [],
            show: false,
            date_show: false,
            clickid: null,
            curPage: 1,
            total: 0,
            showResult: false,
            columns2: [
                {
                    title: "序号",
                    width: 99,
                    key: "id"
                },
                {
                    title: "公司",
                    key: "coname"
                },
                {
                    title: "部门",
                    key: "divname"
                },
                {
                    title: "姓名",
                    key: "name"
                },
                {
                    title: "手机号",
                    key: "phone"
                },
                {
                    title: "邀请码",
                    key: "invite_code"
                },
                {
                    title: "报到时间",
                    key: "report_at"
                },
                {
                    title: "确认时间",
                    // key: "msg2"
                    render: (h, params) => {
                        return h(
                            "span",
                            {},
                            params.row.msg2 == 1 ? "确认" : "未确认"
                        );
                    },
                },
                {
                    title: "昵称",
                    key: "nickname"
                },
                {
                    title: "头像",
                    render: (h, params) => {
                        return h(
                            "img",
                            {
                                style: {
                                    width: "30px",
                                    verticalAlign: "middle"
                                },
                                attrs: {
                                    src: this.data[params.index].avatarurl
                                }
                            },
                            ""
                        );
                    }
                },
                {
                    title: "签到天数",
                    key: "sign_count"
                },
                {
                    title: "签到礼包数",
                    key: "award_count"
                },
                {
                    title: "总积分",
                    key: "integral"
                },
                {
                    title: "操作",
                    key: "operate",
                    width: 150,
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "span",
                                {
                                    style: {
                                        margin: "0 5px 0 0",
                                        textDecoration: "underline",
                                        color: "#4b80fd",
                                        cursor: "pointer"
                                    },
                                    on: {
                                        click: () => {
                                            this.datepicked(
                                                this.data[params.index].id,
                                                self.value2
                                            );
                                        }
                                    }
                                },
                                "设置报道时间"
                            ),
                            h(
                                "span",
                                {
                                    style: {
                                        margin: "0 5px 0 0",
                                        textDecoration: "underline",
                                        color: "#4b80fd",
                                        cursor: "pointer"
                                    },
                                    on: {
                                        click: () => {
                                            this.integralList(
                                                this.data[params.index].id
                                            );
                                        }
                                    }
                                },
                                "积分明细"
                            ),
                            h(
                                "span",
                                {
                                    style: {
                                        textDecoration: "underline",
                                        color: "#fd4b5c",
                                        cursor: "pointer"
                                    },
                                    on: {
                                        click: () => {
                                            this.delete(
                                                this.data[params.index].id
                                            );
                                        }
                                    }
                                },
                                "删除"
                            )
                        ]);
                    }
                }
            ]
        };
    },

    methods: {
        format1(time, format) {
            var t = new Date(time);
            var tf = function(i) {
                return (i < 10 ? "0" : "") + i;
            };
            return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a) {
                switch (a) {
                    case "yyyy":
                        return tf(t.getFullYear());
                        break;
                    case "MM":
                        return tf(t.getMonth() + 1);
                        break;
                    case "mm":
                        return tf(t.getMinutes());
                        break;
                    case "dd":
                        return tf(t.getDate());
                        break;
                    case "HH":
                        return tf(t.getHours());
                        break;
                    case "ss":
                        return tf(t.getSeconds());
                        break;
                }
            });
        },
        exportData() {
            //  1. 获取全部数据
            this.list({all: 1, page: 1,  gotData: data => {
              console.log(data)
                this.$refs.table.exportCsv({
                    filename: "预备员工信息",
                    columns: this.columns2
                              .filter( col => col.key !== 'operate')
                              .map( col => col.title === '确认时间' ? {...col, key: 'msg1'} : col),
                    data: data
                });
                this.refresh()
            }})
            //  2. 导出表格
            //  3. 还原列表
            // this.$refs.table.exportCsv({
            //     filename: "预备员工信息"
            // });
        },
        addOne() {
            this.$refs.editor.show();
        },
        search(keyword) {
            if(keyword) {
                // 搜索关键字
                let poid = localStorage.pid;
                $.ajax({
                    url:
                        "https://evp.51job.com/51job/api/1.0/index.php/minirs/user/searchUser",
                    data: {
                        project_id: poid,
                        search: keyword
                    },
                    type: "POST",
                    dataType: "json",
                    success: res => {
                        this.showSearchResult(res.data)
                    }
                });
            } else {
                this.refresh()
            }
            
        },
        list({page, all, gotData}) {
            var self = this;
            var poid = localStorage.pid;

            $.ajax({
                url:
                    "https://evp.51job.com/51job/api/1.0/index.php/minirs/user/index",
                data: {
                    project_id: poid,
                    page: page || 1,
                    all: all || 0
                },
                type: "POST",
                dataType: "json",
                success: function(data) {
                    // console.log(data);
                    if (data.code == 1) {
                        for (var i = 0; i < data.data.length; i++) {
                            data.data[i].index = i + 1;
                        }
                        self.data = data.data; // 列表数据
                        self.total = data.total; // 页码器总数
                        self.showResult = false; // 控制页码器显示
                        setTimeout( () => {
                            if(gotData) gotData(data.data)
                        }, 500)
                    }
                }
            });
        },
        showSearchResult(list){
            this.showResult = true // 隐藏页码器
            this.data = list
        },
        refresh() {
            this.list({page: this.curPage});
        },
        integralList(id) {
            var self = this;
            $.ajax({
                url:
                    "https://evp.51job.com/51job/api/1.0/index.php/minirs/user_ir/getUserSign",
                data: {
                    user_id: id
                },
                type: "POST",
                dataType: "json",
                success: function(data) {
                    console.log("id", id);
                    console.log("data1", data);
                    if (data.code == 1) {
                        self.data2 = data.data;
                        self.show = true;
                    }
                    console.log("data2", self.data2);
                }
            });
        },
        datepicked(id) {
            var self = this;
            this.date_show = true;
            self.clickid = id;
        },
        // getTime(date) {
        //     console.log(date);
        //     console.log(date.constructor);
        //     let self = this;
        //     let str = date;
        //     str = str.replace(/-/g, "/");
        //     let strDate = new Date(str);
        //     console.log(strDate);
        // },
        ok() {
            this.show = false;
        },
        oktime(date) {
            var self = this;
            // this.date_show = false;
            date = self.value2;
            console.log(typeof date);
            let id = self.clickid;
            var result = this.format1(date, "yyyy-MM-dd");
            console.log(result);
            $.ajax({
                url:
                    "https://evp.51job.com/51job/api/1.0/index.php/minirs/User/setUser",
                data: {
                    user_id: id,
                    report_at: result
                },
                type: "POST",
                dataType: "json",
                success: function(data) {
                    console.log("id", id);
                    console.log("report", result);
                    console.log(data);
                    $.map(self.data, function(item, index) {
                        if (item.id == id) {
                            self.data[index].report_at = result;
                        }
                    });
                }
            });
        },
        changePage(page){
            this.curPage = page;
            this.list({page: this.curPage})
        },
        delete(id) {
            let poid = localStorage.pid;
            let deleteModalConfig = {
                title: "删除确认",
                content: "删除操作无法还原，是否确认？",
                okText: "确认删除",
                cancelText: "取消",
                closable: true,
                onOk: () => {
                    // 确认删除操作
                    $.post('https://evp.51job.com/51job/api/1.0/index.php/minirs/user/delUser', {
                        project_id: poid,
                        id: id
                    }, res => {
                        if (res.code === 1) {
                            // 成功
                            this.$Message.success('删除成功')
                            this.refresh();
                        } else {
                            this.$Message.error(res.msg)
                        }
                    })
                }
            };
            this.$Modal.confirm(deleteModalConfig);
        },
        importExcel() {
            var poid = localStorage.pid;
            var self = this;
            var formData = new FormData($("#activeForm")[0]);
            // formData.append('execl', $("#activeForm")[0])
            formData.append("project_id", poid);

            $.ajax({
                url:
                    "https://evp.51job.com/51job/api/1.0/index.php/minirs/user/execlAdd",
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                type: "POST",
                dataType: "json",

                success: function(data) {
                    console.log(data);
                    var iRepeat = data.iRepeat;
                    var iSuccess = data.iSuccess;

                    if (data.code == 1) {
                        self.$Message.success("导入完成");
                        self.list({});
                    } else {
                        self.$Message.error("导入失败");
                    }
                }
            });
        },
        handleFileChange() {
            $("#fileExport").click();
        },
        Pick() {
            console.log("Pick");
        }
    },
    created() {
        var self = this;
        var poid = localStorage.pid;
        self.list({});
    },
    components: {
        Adder
    }
};
</script>
<style scoped>
.time {
    font-size: 18px;
}
.content {
    font-size: 14px;
}
.innertitle {
    line-height: 30px;
    font-size: 14px;
    text-decoration: underline;
    color: #4b80fd;
    font-family: MicrosoftYaHei;
    cursor: pointer;
}
.inline-title {
    line-height: 38px;
    text-decoration: underline;
    color: #4b80fd;
    font-family: MicrosoftYaHei;
    font-size: 14px;
}
.fazhanlicheng {
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 1px;
    padding: 0px;
}

.title {
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    line-height: 40px;
    font-weight: bold;
}

.inner-info2 {
    float: left;
    line-height: 60px;
    font-size: 14px;
    color: #333;
    font-family: MicrosoftYaHei;
    margin-right: 10px;
}

.time-picker {
    margin-top: 15px;
}

.add-new-progress {
    box-sizing: border-box;
    background: #fff;
    padding: 0;
    text-align: center;
    color: #4b80fd;
    font-family: SourceHanSansCN-Normal;
    font-size: 14px;
    line-height: 60px;
    cursor: pointer;
}

.picinput11,
.picinput22,
.picinput33,
.picinput44,
.picinput1,
.picinput2,
.picinput3,
.picinput4,
.bannerinput,
.bannerinput2 {
    display: none;
}

.img-border {
    border: 1px dashed #d9d9d9;
    background: #e5e5e5;
    display: block;
    width: 60px;
    text-align: center;
    height: 60px;
    line-height: 60px;
    font-size: 50px;
    cursor: pointer;
}

.banner {
    width: 60px;
    text-align: center;
    height: 60px;
}

.avatar-uploader-icon-banner {
    font-size: 28px;
    color: #8c939d;
    width: 167px;
    height: 84px;
    line-height: 84px;
    text-align: center;
    float: left;
    position: relative;
}
.timepick {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 212px;
}
.add {
    margin-left: 10px;
}
.paganation {
    margin-top: 20px;
    text-align: center;
}
.searcher {
    width: 300px;
    /* border: 1px solid #000; */
    border-radius: 4px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}
</style>
